import React from 'react';
import {inject, observer} from 'mobx-react';
import {WeaTable, WeaInputNumber, WeaCheckbox, WeaSearchGroup,WeaInput} from 'ecCom';
const toJS = mobx.toJS;

@inject ('planProgramViewStore')
@observer
export default class WorkSummary extends React.Component {
  constructor (props) {
    super (props);
    this.state = {searchGroupVisible:true};
    this.store = this.props.planProgramViewStore;
    this.saveRef = ref => {
      this.refDom = ref;
    };
  }

  getPreviewColumns = () => {
    let fieldRows = this.store.fieldRows;
    let columns = [];
    let _this = this;

    let totalWidth = this.refDom ? this.refDom.clientWidth : 1000;
    fieldRows.map ((v, i) => {
      if (v.isshow == '1') {
        columns.push ({
          title: v.customname ? v.customname : v.showname,
          dataIndex: v.fieldname,
          key: v.fieldname,
          width: v.showwidth / 16 * totalWidth + 'px',
        });
      }
    });
    return columns;
  };

  getFieldNameColumn = (text, paramName) => {
    return (
      <div>
        <WeaCheckbox
          onChange={e => {
            this.store.fieldRows.map ((v, i) => {
              //标题不能动 固定死
              if (v.fieldname != 'name') {
                v[paramName] = e;
              }
            });
          }}
        />{text}
      </div>
    );
  };
  checkBoxRender = (text, record, index, paramName) => {
    let viewAttr = 2;
    if (
      record.fieldname == 'name' ||
      (paramName == 'ismust' && record.isshow == '0')
    )
      viewAttr = 1;

    return (
      <WeaCheckbox
        viewAttr={viewAttr}
        value={text}
        onChange={e => this.onValueChange (e, paramName, record.id)}
      />
    );
  };
  inputRender (text, record, index, paramName) {
    switch (paramName) {
      case 'customname':
      return   <WeaInput
          value={text}
         onChange={e => this.onValueChange (e, paramName, record.id)}

        >
          
        </WeaInput>
      case 'showorder':
        return (
          <WeaInputNumber
            regExp={'^[0-9]+(.[0-9]{2})?$ '}
            precision={2}
            value={text}
            onChange={e => this.onValueChange (e, paramName, record.id)}
          />
        );
      case 'showwidth':
        return (
          <WeaInputNumber
            value={text}
            onChange={e => this.onValueChange (e, paramName, record.id)}
          />
        );
    }
  }

  onValueChange = (e, paramName, id) => {
    this.store.fieldRows[id][paramName] = e;
  };

  getDIYColumns = () => {
    return [
      {
        title: '字段',
        dataIndex: 'showname',
        key: 'showname',
      },
      {
        title: this.getFieldNameColumn ('是否显示', 'isshow'),
        dataIndex: 'isshow',
        key: 'isshow',
        render: (text, record, index) => {
          return this.checkBoxRender (text, record, index, 'isshow');
        },
      },
      {
        title: this.getFieldNameColumn ('是否必填', 'ismust'),
        dataIndex: 'ismust',
        key: 'ismust',
        render: (text, record, index) => {
          return this.checkBoxRender (text, record, index, 'ismust');
        },
      },
      {
        title: '排序',
        dataIndex: 'showorder',
        key: 'showorder',
        render: (text, record, index) => {
          return this.inputRender (text, record, index, 'showorder');
        },
      },
      {
        title: '宽度比例',
        dataIndex: 'showwidth',
        key: 'showwidth',
        render: (text, record, index) => {
          return this.inputRender (text, record, index, 'showwidth');
        },
      },
      {
        title: '自定义名称',
        dataIndex: 'customname',
        key: 'customname',
        render: (text, record, index) => {
          return this.inputRender (text, record, index, 'customname');
        },
      },
    ];
  };
  getPreviewTableConfig = () => {
    return {
      columns: this.getPreviewColumns (),
    };
  };
  //       begindate2 enddate2 days2 result finishrate
  getDIYTableConfig = () => {
    return {
      columns: this.getDIYColumns (),
      dataSource: toJS (this.store.fieldRows),
      pagination: false,
    };
  };

  onSearchGroupChange=(v)=>{
    this.setState({searchGroupVisible:v})
  }
  onTitleClick=()=>{
    this.setState({searchGroupVisible:!this.state.searchGroupVisible})
  }
  render () {
    let {auth: {canedit, canview}} = this.store;

    return (
      <div ref={this.saveRef}>
        <div className="preview-table">

          <WeaTable {...this.getPreviewTableConfig ()} />
        </div>
        {canedit &&
          <WeaSearchGroup
            className="diy-column"
            title= {<div className="diy-title" onClick={this.onTitleClick}>自定义总结列字段</div>}
            showGroup={this.state.searchGroupVisible}
            onVisibleChange={this.onSearchGroupChange}
          >
            <WeaTable {...this.getDIYTableConfig ()} />
          </WeaSearchGroup>}

      </div>
    );
  }
}
